import { DailogModel } from "@/type/BaseType"
import { assignTreeApi, assignSaveApi } from '@/api/role/role'
import { AssignSaveParams } from "@/api/role/roleModel"
import { getUserId } from "@/utils/auth"
import { reactive, ref } from "vue"
import { ElTree } from "element-plus";
import userInstance from '@/hooks/userInstance'


export default function assignMenu(dailog:DailogModel, onClose, onShow) {
    // 全局属性
    const {global} = userInstance()
    // 获取树的ref属性
    const assignTreeRef = ref<InstanceType<typeof ElTree>>()
    // 树的属性配置
    const defineProps = reactive({
        children: 'children',
        label: 'label'
    })
    // 权限树数据
    const assignTreeData = reactive({
        list: [], // 树数据
        assignTreeChecked: [] // 原来分配的权限id集合
    })
    // 定义分配权限保存的参数
    const saveParams = reactive<AssignSaveParams>({
        roleId: '',
        list: []
    })
    // 确定事件
    const confirm = async () => {
        // 获取选中的数据
        let checkIds = assignTreeRef.value?.getCheckedKeys(false) || [] // 不加上 || [] ts会报错
        console.log(checkIds)
        // 获取半节点ids(子节点最顶级的节点id)
        let topIds = assignTreeRef.value?.getHalfCheckedKeys() || [] // 不加上 || [] ts会报错
        console.log(topIds)
        saveParams.list = checkIds?.concat(topIds)
        if(!saveParams.list.length) {
            global.$message({
                message: '权限分配不能为空!',
                type: 'success'
            })
            return
        }
        let res = await assignSaveApi(saveParams)
        if(res && res.code === 200) {
            global.$message({
                message: '分配成功',
                type: 'success'
            })
            onClose()
        }
    }
    // 展示分配权限弹窗
    const show = async (roleId: string | number, name: string | number) => {
        // 清空数据
        assignTreeData.list = []
        assignTreeData.assignTreeChecked = []
        // 设置角色id
        saveParams.roleId = roleId
        // 查询权限树的数据
        const params = {
            roleId,
            userId: getUserId() || '',
        }
        let res = await assignTreeApi(params)
        // console.log(res)
        if(res && res.code === 200) {
            assignTreeData.list = res.data.listmenu
            assignTreeData.assignTreeChecked = res.data.checkList
            // 数据回显,判断该角色原来是否已经分配过权限,如果有，则回显
            if(assignTreeData.assignTreeChecked.length > 0) {
                let newArr = []
                assignTreeData.assignTreeChecked.forEach(id => {
                    checked(id,assignTreeData.list,newArr)
                })
                assignTreeData.assignTreeChecked = newArr
            }
        }
        dailog.height = 400
        dailog.width = 300
        dailog.title = `为【${name}】分配权限`
        onShow()
    }
    const checked = (id,data,newArr) => {
        data.forEach(item => {
            if(item.id === id) {
                if(item.children && item.children.length === 0) {
                    newArr.push(item.id)
                }
            } else {
                if(item.children && item.children.length !== 0) {
                    // 递归调用
                    checked(id,item.children,newArr)
                }
            }
        })
    }
    return {
        assignTreeData,
        confirm,
        show,
        defineProps,
        assignTreeRef
    }
}